<template>
  <div >
<!-- 导航栏 -->
    <van-nav-bar class="zc" title="登录" left-arrow @click-left="$router.back()"> </van-nav-bar>
             <van-form @submit="onSubmit">
       <!-- 输入手机号，调起手机号键盘 -->
      <van-field 
     name="username"
     label="手机号"
      v-model="username" 
      placeholder="手机号"
      :rules="[{required: true, message: '请输入手机号'},{pattern: /^1[3-9]\d{9}$/,message: '手机号格式错误'}]"
       />
    <van-field
     v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{required: true, message: '请输入密码'},{validator:(e)=>/^\w{6,12}$/.test(e), message: '密码格式为6-12位字母或者数字'}]"
    />
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit" :color="baseColor">
        提交
      </van-button>
      
    </div>  
       <router-link to="/forget">忘记密码</router-link>
      <router-link to="/reg">注册</router-link>
    </van-form>
   
</div>
</template>



<script >
import{Form}from "vant";
import{Field}from "vant";
import {login}from '@/api/user'
export default {
components: {
    [Form.name]: Form,
    [Field.name]: Field,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
        //  在这那额数据是校验过的  
      console.log("submit", values);
      

      login(values).then(res=>{
        console.log(res)

        //  登录成功  
        // 信息存起来
        if(res.code == 0){
          let {userInfo,token,uid,tokenExpired} = res;

       
            localStorage.setItem('token',token)
            localStorage.setItem('tokenExpired',tokenExpired)
           
      this.$store.dispatch('getuserInfo',token) 
     
              //  this.$store.commit('save',['uid',uid])
              //  this.$store.commit('save',['token',token])
              //  this.$store.commit('save',['userInfo',userInfo])
              //  this.$store.commit('save',['isLogin',true]) 
              
            


            setTimeout(v=>{
               this.$router.back()
            },800)
        }else{


        }
 


      })




    }
  },
};
</script>

<style>

</style>